<template>
  <view class="profile-page">
    <!-- 顶部用户信息 -->
    <view class="user-info">
      <image class="user-avatar" src="/static/avatars/avatar1.jpeg" alt="用户头像" />
      <view class="user-details">
        <text class="user-name">{{ userName }}</text>
        <text class="user-id">ID: {{ userId }}</text>
      </view>
    </view>

    <!-- 功能列表 -->
    <view class="profile-functions">
      <view class="function-item" @click="navigateTo('messages')">
        <image class="function-icon" src="/static/img/profile/messages.png" alt="消息中心" />
        <text class="function-text">消息中心</text>
      </view>
      <view class="function-item" @click="navigateTo('settings')">
        <image class="function-icon" src="/static/img/profile/settings.png" alt="设置" />
        <text class="function-text">设置</text>
      </view>
      <view class="function-item" @click="navigateTo('favorites')">
        <image class="function-icon" src="/static/img/profile/favorites.png" alt="我的收藏" />
        <text class="function-text">我的收藏</text>
      </view>
      <view class="function-item" @click="navigateTo('help')">
        <image class="function-icon" src="/static/img/profile/help.png" alt="帮助与反馈" />
        <text class="function-text">帮助与反馈</text>
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <view class="logout-section">
      <button class="logout-button" @click="logout">退出登录</button>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useRouter } from 'vue-router'; // 如果使用 vue-router

export default defineComponent({
  setup() {
    // 定义用户数据
    const userName = ref<string>('张三');
    const userId = ref<string>('123456789');

    // vue-router 的实例（如果你在使用 vue-router）
    const router = useRouter();

    // 导航到不同页面的方法
    const navigateTo = (page: string) => {
      // 你可以使用 `uni.navigateTo`，或者如果使用了 `vue-router`，可以使用 `router.push`
      uni.navigateTo({
        url: `/pages/${page}/${page}`
      });

      // 如果使用 vue-router，可以这样导航
      // router.push({ path: `/${page}` });
    };

    // 退出登录的方法
    const logout = () => {
      uni.showModal({
        title: '确认退出',
        content: '你确定要退出登录吗？',
        success: (res: any) => {
          if (res.confirm) {
            // 执行退出逻辑，例如清除用户信息并跳转到登录页面
            uni.reLaunch({
              url: '/pages/login/login'
            });
          }
        }
      });
    };

    return {
      userName,
      userId,
      navigateTo,
      logout
    };
  }
});
</script>

<style scoped>
.profile-page {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 用户信息区域 */
.user-info {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
}

.user-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.user-id {
  font-size: 24rpx;
  color: #888;
}

/* 功能列表 */
.profile-functions {
  margin-top: 20rpx;
}

.function-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 10rpx;
}

.function-icon {
  width: 60rpx;
  height: 60rpx;
  margin-right: 20rpx;
}

.function-text {
  font-size: 28rpx;
}

/* 退出登录 */
.logout-section {
  margin-top: 40rpx;
  padding: 0 20rpx;
}

.logout-button {
  width: 100%;
  padding: 20rpx;
  background-color: #ff4d4f;
  color: #fff;
  font-size: 28rpx;
  border-radius: 10rpx;
  text-align: center;
}
</style>
